<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>11-axios取消请求</title>
    <!-- 这样即可引入axios -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.4/axios.js"></script>
</head>

<body>
    <button>GET</button>
    <button>取消请求</button>

    <script>
        let btns = document.querySelectorAll('button');
        let cancel = null;

        btns[0].onclick = () => {
            axios.get('http://localhost:10086/demo/demoGetDelay',{
                // axios.CancelToken构造函数接收一个函数作为参数，该函数接收一个形参，未来是这个请求的取消函数。未来你调用这个函数，这次请求就会被取消
                cancelToken: new axios.CancelToken((e)=>{
                    cancel = e;
                })
            })
                .then(res => {
                    console.log(res)
                })
                .catch(err => {
                    console.error('123123'+err);
                })
        }

        btns[1].onclick = () => {
            cancel();
        }
    </script>
</body>

</html>